<template>
  <div id="User">
    <div class="user">
      <div class="pic" @click="logout"></div>
      <div class="text">
        <p class="name">xigelaila</p>
        <p class="phone">152****2151</p>
      </div>
    </div>
    <div class="btn">账户设置</div>
  </div>
</template>

<script setup>
var logout = ()=>{
  alert('您已注销登录，请重新登录！');
  window.location.href = "http://localhost:8080/login";

}
</script>

<style scoped>
#User {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#User .user {
  display: flex;
  align-items: center;
}
#User .user .pic {
  width: 80px;
  height: 80px;
  background-color: #ccc;
  border-radius: 100%;
  margin-right: 10px;
}
#User .user .text .name {
    line-height: 30px;
  font-weight: 700;
}
#User .user .text .phone{
    font-size: 14px;
    color: #ccc;
}
#User .btn{
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 20px;
    font-size: 12px;
}
</style>